﻿/* Table of Content
==================================================
	#Dot less css - Variables
	#Dot less css - Mixins

	#Site Styles
        #Base
        #Link
        #Text
        #Images
        #Form controls        
        #Command bar
        #Popup
		#Bootstrap elements
		
	#Page Styles
		#Template        

================================================== */

/* ====================================================== */
/* #Dot less css - Variables ============================ */
/* ====================================================== */
@bg-color:#5E87B0;
@bg-content-color:#F4F4F4;
@bg-active-left-menu-color:#dbdbdb;
@bg-page-header-color:#fff;
@border-content-color:#E7E7E7;
@border-left-menu-color:#fff;
@button-bar-border-color:#507AA4;
@skin-menu-color:#486D93;
@text-menu-color:#fff;
@text-dropdown-color:#333;
@icon-color-1:#888;

/* ====================================================== */
/* #Dot less css - Mixins =============================== */
/* ====================================================== */
.rounded-corners(@radius: 13px) {
    border-radius: @radius; /* Opera 10.5, IE9+, Safari 5, Chrome, Firefox 4+, iOS 4, Android 2.1+ */
    -webkit-border-radius: @radius; /* Safari 3-4, iOS 1-3.2, Android ≤1.6 */
    -moz-border-radius: @radius; /*Firefox*/
    //behavior: url(images/PIE.htc);
}

.box-sizing(@value: border-box) {
    box-sizing: @value;
    -moz-box-sizing: @value;
    -webkit-box-sizing: @value;
}

.box_shadow(@value: 0 0 4px 0 #fff) {
    -webkit-box-shadow: @value; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    box-shadow: @value; /* Opera 10.5, IE9+, Firefox 4+, Chrome 6+, iOS 5 */
}

.box_transition(@time: 0.3s,@effect: ease-out,@property: all) {
    -webkit-transition: @property @time @effect; /* Safari 3.2+, Chrome */
    -moz-transition: @property @time @effect; /* Firefox 4-15 */
    -o-transition: @property @time @effect; /* Opera 10.5–12.00 */
    transition: @property @time @effect; /* Firefox 16+, Opera 12.50+ */
}

.box_animation(@time: 1s) {
    -webkit-animation: myanim @time infinite; /* Safari 5, Chrome */
    -moz-animation: myanim @time infinite; /* Firefox 5-15 */
    -o-animation: myanim @time infinite; /* Opera 12+ */
    animation: myanim @time infinite; /* Safari 5, Chrome, Firefox 16+ */
    animation-iteration-count: 1;
    -moz-animation-iteration-count: 1; /* Firefox */
    -webkit-animation-iteration-count: 1; /*Safari and Chrome*/
    -o-animation-iteration-count: 1; /* Opera */
}

.box_rotate(@degree: 180deg) {
    -webkit-transform: rotate(@degree); /* Safari 3.1+, Chrome */
    -moz-transform: rotate(@degree); /* Firefox 3.5-15 */
    -ms-transform: rotate(@degree); /* IE9+ */
    -o-transform: rotate(@degree); /* Opera 10.5-12.00 */
    transform: rotate(@degree); /* Firefox 16+, Opera 12.50+ */
}

.column-count(@number: 2) {
    -moz-column-count: @number; /* Firefox */
    -webkit-column-count: @number; /* Safari and Chrome */
    column-count: @number;
}

.opacity-box(@value,@percentValue){
	filter: alpha(opacity=@percentValue);
    opacity: @value;
}

.static-bg-position(@xPosition: 0) {
    background-position: @xPosition 0;
}

.hover-bg-position(@xPosition: 0) {
    background-position: @xPosition -40px;
}

.disable-bg-position(@xPosition: 0) {
    background-position: @xPosition -80px;
}
/* =================================================================================================== */

/* ====================================================== */
/* #Site Styles ========================================= */
/* ====================================================== */
/* ===== #Base ========= */
i{
    vertical-align:text-top;
}
body
{
    overflow-x:hidden
}
/* =================================================================================================== */

/* ===== #Link ========= */

/* =================================================================================================== */

/* ===== #Text ========= */

/* =================================================================================================== */

/* ================== #Images ========= */
.sprite
{
    color: transparent;
    background: url(images/ObjectPng.png) no-repeat;
    width:40px;
    height:40px;
    cursor:pointer;
}

.icon-logout
{
    .static-bg-position(-80px);
    /*&.selected, &:hover {
        .hover-bg-position(-80px);
    }*/
}
/* ================================================================================================ */

/* ===== #Bootstrap elements ========= */
.nav .open > a,.nav > li > a:focus {
    background-color:#80A0C1 !important;
}
.page-header
{
    margin:0;
}
/* ================================================================================================ */

/* ====================================================== */
/* #Page Styles ========================================= */
/* ====================================================== */

/* ================== #Template ========= */
.nav
{
    >li>a:hover{
        background-color:#80A0C1;
    }
}
.navbar
{
    background:@bg-color;
    border:0;
    margin:0;
    min-height:50px;
}
.navbar-brand
{
    padding:0;
    line-height:50px;
    width:250px;
    a{
        color:@text-menu-color;
        text-decoration:none;
        margin-left:50px;
    }
}
#sidebar-collapse
{
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    .box_shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset);    
    color: @text-menu-color;
    left: 10px;
    padding: 6px 8px;
    position: absolute;
    top: 10px;
    >i{
        float:left;
        padding-bottom:2px;
    }
    &:hover{
        background:@button-bar-border-color;
    }
}
#navbar-left
{    
    .dropdown {        
        background-color: #6F94B8;
        border-right: 1px solid @button-bar-border-color;
        a{
            color:@text-menu-color;            
            &:hover{
                background-color:#80A0C1;
            }
        }
        &:first-child{
            border-left: 1px solid @button-bar-border-color;
        }        
    }
}

#header-user{
    >a{
        color:@text-menu-color;
        padding-top:9px;
        padding-bottom:9px;
    }
    img{
        width:32px;
        height:32px;
    }
}

.dropdown-menu
{
    background:@bg-content-color;
    padding:0;    
    &.skins{
        border-top:1px solid @skin-menu-color;
    }
    i{
        margin:0 5px 0 0;
    }
    .dropdown-title
    {
        background:@skin-menu-color;
        color: @text-menu-color;        
        line-height: 30px;
        padding: 5px 10px;        
    }
    >li>a{
         background-color: @bg-content-color;
         border-bottom: 1px solid @text-menu-color;
         border-top: 1px solid @border-content-color;            
         line-height: 40px;
         padding: 0 10px;
         color:@text-dropdown-color !important;
         white-space:nowrap;
         &:hover{
             background:#fff !important;             
         }
    }
}

#page
{
    background:@bg-content-color;
}

.sidebar
{    
    border-bottom: 1px solid @border-content-color;    
    position: fixed;
    width: 250px;
    top:50px;
}

.sidebar-menu
{
    height: 600px;
    overflow: hidden;   
    >ul{
        border-top: 1px solid @border-left-menu-color;            
        margin:0;
        padding:0;
        > li{
            > a{
                border-top: 1px solid @border-content-color;
                border-bottom: 1px solid @border-left-menu-color;            
                color: #555;
                padding: 15px 15px 15px 20px;            
                text-transform: uppercase;
                display:block;
                font-weight:600;
                text-decoration:none;
                &:hover{
                    background:@text-menu-color;
                }
                &.active{
                    background:@bg-active-left-menu-color;
                }
            }
            a{
                i{
                    margin-right: 8px;                    
                }                
            }                      
        }
    }
    .arrow{
        float:right;
        font-size:10px;
        margin-top:4px;
    }
}

#search-bar
{
    text-align:center;
    .search
    {        
        border:0;
        .rounded-corners(4px);
        color: #555;
        margin: 20px auto;
        padding:8px 30px 8px 10px;
        width: 90%;
    }
    .glyphicon{
        position:absolute;        
        top: 30px;
        right: 22px;
        color:@icon-color-1;
    }
}

#main-content
{    
    margin:50px 0 0 250px;
}
#content
{
    border-left:1px solid #CDD2D2;
    height:1500px;
}

.page-header
{
    background:@bg-page-header-color;
    border-bottom:1px solid #CDD2D2;
    .breadcrumb{
        background:@bg-page-header-color;
    }
    h3
    {
        margin:0;
        width:100%;
    }
    .page-title{
        padding:0 15px;
    }
}
/* ================================================================================================ */